/**
 * 导航级别组件
 * 包括上、下、左、右 
 *     级别控制条
 * 	      放大缩小
 */
NavigationWidget = OpenLayers.Class(BaseWidget,{
	
	initialize : function() {
	},
	
	getElement : function(){
		if(!this.element){
			if(this.config){
				this.element = this.createElement();	
			}
		}
		
		return this.element;
	},
	
	createElement : function(){
		
		var levelbox = $("<div id='NavigationWidget'></div>");
		
		levelbox.addClass("map-level-box");
		if( this.config.top!=null)levelbox.css('top' ,this.config.top+'px');
		if( this.config.right!=null)levelbox.css('right' ,this.config.right+'px');
		if( this.config.left!=null)levelbox.css('left' ,this.config.left+'px');
		if( this.config.bottom!=null)levelbox.css('bottom' ,this.config.bottom+'px');
		
		
		var levelpointer=$("<div></div>");
		levelpointer.addClass("map-level-pointer");
		
		var pointerimage=$("<img></img>");
		pointerimage.addClass("map-level-pointer-image");
		pointerimage[0].src=this.config.levPointerSrc;

		var pointertop=$("<div></div>");
		pointertop.addClass("map-level-pointer-top");
		pointertop.attr('title','向上平移');
		
		var pointerleft=$("<div></div>");
		pointerleft.addClass("map-level-pointer-left");
		pointerleft.attr('title','向左平移');
		
		var pointermiddle=$("<div></div>");
		pointermiddle.addClass("map-level-pointer-middle");
		pointermiddle.attr('title','居中');
		
		var pointerright=$("<div></div>");
		pointerright.addClass("map-level-pointer-right");
		pointerright.attr('title','向右平移');
		
		var pointerbottom=$("<div></div>");
		pointerbottom.addClass("map-level-pointer-bottom");
		pointerbottom.attr('title','向下平移');
		
		levelpointer.append(pointerimage);
		levelpointer.append(pointertop);
		levelpointer.append(pointerleft);
		levelpointer.append(pointerright);
		levelpointer.append(pointerbottom);
		levelpointer.append(pointermiddle);
		
		
		var $this = this;
		
		var getSlideFactor = OpenLayers.Function.bind(function (dim) {
		    return $this.slideRatio ?
		        $this.map.getSize()[dim] * $this.slideRatio :
		        $this.slideFactor;
		}, this);

		//事件绑定
		pointertop.bind("click",function(){
			$this.map.pan(0, -getSlideFactor("h"));
		});
		pointerleft.bind("click",function(){
			$this.map.pan(-getSlideFactor("w"), 0);
		});
		pointerright.bind("click",function(){
			$this.map.pan(getSlideFactor("w"), 0);
		});
		pointerbottom.bind("click",function(){
			$this.map.pan(0, getSlideFactor("h"));
		});
		
		var levelzoom = $("<div></div>")
		levelzoom.addClass("map-level-zoom");
		var levelzoomimage=$("<img></img>");
		levelzoomimage.addClass("map-level-zoomimage");
		levelzoomimage[0].src=this.config.levZoomSrc;
		levelzoom.append(levelzoomimage);
		
		levelzoom.bind("click",function(){
			var curZoom = $this.map.getZoom();
			if(curZoom>=0){
				$this.map.zoomTo(curZoom+1);
			}
		});
		
		$this.maxlevel =( this.map.getNumZoomLevels()+1);
		var scrollHeight=($this.maxlevel*this.config.levelpx);
		var levelscroll=$("<div></div>")
		levelscroll.addClass("map-level-scroll");
		levelscroll.css("height",scrollHeight+"px");
		var levelmove=$("<div></div>");
		levelmove.addClass("map-level-move");

		var levelmoveimage=$("<img></img>");
		levelmoveimage.addClass("map-level-moveimage");
		levelmoveimage[0].src= this.config.levMoveSrc;
		levelmove.append(levelmoveimage);
		var currentLevel = this.map.getZoom();
		
		levelmove.css("top",(currentLevel*this.config.levelpx)+"px");
		var crollMovecurTop=(currentLevel*this.config.levelpx);
		var defaultMovecurTop=(currentLevel*this.config.levelpx);
		
		var levelscrollback=$("<div></div>");
		levelscrollback.addClass("map-level-scroll-back");
		
		levelscroll.append(levelmove);
		
		this.slider = levelmove[0];
		
		this.sliderEvents = new OpenLayers.Events(this, levelmove[0], null, true,
                                            {includeXY: true});
		this.sliderEvents.on({
			"mousedown":this.zoomBarDown,
			//"mousemove":this.zoomBarDrag,	
			"mouseup": this.zoomBarUp
		});
		//点击
		levelscroll.click(function(event){
			var floor=Math.floor((event.offsetY/$this.config.levelpx));
			$this.map.zoomTo($this.maxlevel-1-floor);
            OpenLayers.Event.stop(event);
		});
		                                        
		this.map.events.register("zoomend", this, this.moveZoomBar);
		
		levelscroll.append(levelscrollback);
		var levelnarrow=$("<div></div>");
		levelnarrow.addClass("map-level-narrow");
	
		var levelnarrowimage=$("<img></img>");
		levelnarrowimage.addClass("map-level-narrowimage");
		levelnarrowimage[0].src=this.config.levNarrowSrc;
	
		levelnarrow.append(levelnarrowimage);
		
		levelnarrow.bind("click",function(){
			var curZoom = $this.map.getZoom();
			if(curZoom>0){
				$this.map.zoomTo(curZoom-1);
			}
		});
		
		levelscroll.css("backgroundImage","url("+this.config.levScrollSrc+")");
		
		levelbox.append(levelpointer);
		levelbox.append(levelzoom);
		levelbox.append(levelscroll);
		levelbox.append(levelnarrow);
		
		var newTop = 
            ((this.map.getNumZoomLevels()-1) - this.map.getZoom()) * 
            this.zoomStopHeight ;
        levelmove.css("top",newTop + "px");
        
		return levelbox;
		
	},
	
	passEventToSlider:function(evt) {
        this.sliderEvents.handleBrowserEvent(evt);
    },
    
    moveZoomBar:function() {
        var newTop = 
            ((this.map.getNumZoomLevels()-1) - this.map.getZoom()) * 
            this.zoomStopHeight ;
        this.slider.style.top = newTop + "px";
    }, 
    
	zoomBarDown:function(evt) {
		if (!OpenLayers.Event.isLeftClick(evt) && !OpenLayers.Event.isSingleTouch(evt)) {
		    return;
		}
		this.map.events.on({
		    "touchmove": this.passEventToSlider,
		    "mousemove": this.passEventToSlider,
		    "mouseup": this.passEventToSlider,
		    scope: this
		});
		this.mouseDragStart = evt.xy.clone();
		this.zoomStart = evt.xy.clone();
		
		OpenLayers.Event.stop(evt);
	},
	
	zoomBarDrag:function(evt) {
        if (this.mouseDragStart != null) {
        	var floor=Math.floor((evt.offsetY/this.config.levelpx));
       
            var deltaY = this.mouseDragStart.y - evt.xy.y;
            var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv);
			var newTop = parseInt(this.slider.style.top) - deltaY;
			this.slider.style.top = newTop+"px";
			this.mouseDragStart = evt.xy.clone();
          
          	//var Y=this.zoomStart.y - evt.xy.y;
            this.deltaY = this.zoomStart.y - evt.xy.y;
            OpenLayers.Event.stop(evt);
        }
    },
    
    zoomBarUp:function(evt) {
        if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
            return;
        }
        if (this.mouseDragStart) {
            
            this.map.events.un({
                "touchmove": this.passEventToSlider,
                "mouseup": this.passEventToSlider,
                "mousemove": this.passEventToSlider,
                scope: this
            });
            var zoomLevel = this.map.zoom;
            if (this.map.fractionalZoom) {
                zoomLevel += this.deltaY/this.zoomStopHeight;
                zoomLevel = Math.min(Math.max(zoomLevel, 0), 
                                     this.map.getNumZoomLevels() - 1);
            } else {
                zoomLevel += this.deltaY/this.zoomStopHeight;
                zoomLevel = Math.max(Math.round(zoomLevel), 0);      
            }
            this.map.zoomTo(zoomLevel);
            this.mouseDragStart = null;
            this.zoomStart = null;
            this.deltaY = 0;
            OpenLayers.Event.stop(evt);
        }
    },
    zooomclick :function(evt){
    	this.map.events.un({
                "touchmove": this.passEventToSlider,
                "mouseup": this.passEventToSlider,
                "mousemove": this.passEventToSlider,
                scope: this
            });
            var zoomLevel = this.map.zoom;
            if (this.map.fractionalZoom) {
                zoomLevel += this.deltaY/this.zoomStopHeight;
                zoomLevel = Math.min(Math.max(zoomLevel, 0), 
                                     this.map.getNumZoomLevels() - 1);
            } else {
                zoomLevel += this.deltaY/this.zoomStopHeight;
                zoomLevel = Math.max(Math.round(zoomLevel), 0);      
            }
            this.map.zoomTo(zoomLevel);
            this.mouseDragStart = null;
            this.zoomStart = null;
            this.deltaY = 0;
            OpenLayers.Event.stop(evt);
    },
    maxlevel :null,//地图级别
    deltaY: null,
	slider:null,
	sliderEvents:null,
	slideFactor:50,
	slideRatio:null,
	zoomStopHeight: 10,
	CLASS_NAME:"openGis.NavigationWidget"
});

